<template>
  <div class="editPerson">
    <div class="editNav">
      <span class="back" @click="back"><van-icon name="arrow-left" />返回</span> <span>修改个人信息</span>
      <span class="save" @click="onSave">保存</span>
    </div>
    <div class="editForm">
      <label for="username"
        >用户名：<input
          type="text"
          id="username"
          class="userName"
          v-model="personStore.username" /></label
      ><br />
      <label for="nickname"
        >昵&nbsp;&nbsp;&nbsp;称：<input
          type="text"
          id="nickname"
          class="nickName"
          v-model="personStore.nickname" /></label
      ><br />
      <label for="password"
        >修改密码：<input
          type="password"
          id="password"
          class="password"
          v-model="password" /></label
      ><br />
      <label for="tel"
        >联系电话：<input
          type="text"
          id="tel"
          class="tel"
          v-model="mobile"
        /> </label
      ><br />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { usePerson } from "../stores";
import { useRouter } from "vue-router";
const router = useRouter();
const personStore = usePerson();
const mobile = ref("");
const password = ref("");
const onSave = () => {
  // 调用pinia里的方法，并传入新修改的参数，v-model动态绑定新修改的信息
  personStore.edit(personStore.username,personStore.nickname);
  router.push("/mine");
};
const back = () => {
  history.back();
};
</script>

<style lang="scss" scoped>
.editPerson {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  .editNav {
    height: 50px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
    .back,.save{
        color:rgba(134, 87, 241);
        
        
    }
  }
  .editForm {
    label {
      font-size: 16px;
      line-height: 50px;
      input {
        width: 75%;
        height: 50px;
        border: none;
        border-bottom: 1px solid #ecebeb;
      }
    }
  }
}
</style>
